<template>
  <div class="common-layout">
    <el-container>
      <!-- 个人页头部-->
      <el-header style="height:180px  ;">
        <el-carousel height="180px" style="width: 100%">
          <el-carousel-item v-for="image in userImage" :key="image">
            <el-image :src="image"/>
          </el-carousel-item>
          <!--  头像-->
          <div style="width: 100% ;	position: absolute;">
            <el-avatar
                style="margin-top:50px;margin-left: 50px;"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                size="large"
            />
          </div>
          <!--        标签-->
          <div class="tag" style="width: 100%	;position: absolute; margin-top:130px">
            <el-tag
                v-for="tag in dynamicTags"
                :key="tag"
                class="mx-1"
                closable
                :disable-transitions="false"
                @close="tagHandleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
                v-if!="inputVisible"
                ref="InputRef"
                v-model="inputValue"
                class="ml-1 w-20"
                size="small"
                @keyup.enter="handleInputConfirm"
                @blur="handleInputConfirm"
            />
            <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
              + New Tag
            </el-button>
          </div>
        </el-carousel>
      </el-header>
      <div style="margin: 20px 0"/>


      <el-container style="width: 100% ;height: 85vh">

        <!--      侧边栏-->

        <el-aside style=" width:200px ;">
          <!--      侧边菜单栏-->


          <el-menu
              default-active="1"
              router
              :default-active="$route.path"
              class="el-menu-vertical"
              @select="changeSidebar"
              @open="handleOpen"
              @close="handleClose"
              style="height: 100%"

          >

            <el-menu-item index="info">
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>个人信息</span>
            </el-menu-item>

            <el-menu-item index="favorite">
              <el-icon>
                <StarFilled/>
              </el-icon>
              <span>收藏</span>
            </el-menu-item>
            <el-menu-item index="users/projectinfo">
              <el-icon>
                <Management/>
              </el-icon>
              <span>发布内容</span>
            </el-menu-item>
            <el-menu-item index="myorders">
              <el-icon>
                <Shop/>
              </el-icon>
              <span>我的订单</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!--      主页部分-->

        <el-main style="width: 100%;height: 100%">
          <router-view/>
        </el-main>
      </el-container>

    </el-container>
  </div>


</template>

<script lang="ts" setup>
import {UserFilled,} from '@element-plus/icons-vue'
import {nextTick, ref} from 'vue'
import {ElInput} from 'element-plus'

const inputValue = ref('')
const dynamicTags = ref(['百慕大', '女', '00后'])
const inputVisible = ref(false)
const userImage = ref(["../public/dashuhua.jpg", "../public/piying.jpg"])
const InputRef = ref<InstanceType<typeof ElInput>>()
//标签函数
const tagHandleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
  // console.log('sdfsdf')
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    console.log('@@@@')
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}

//侧边菜单函数
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
//中间区域
const changeSidebar = (path) => {
  this.$router.push(path);

}


</script>

<style lang="less" scoped>


/*.demo-type > div {*/
/*  flex: 1;*/
/*  text-align: center;*/

/*}*/

/*.demo-type > div:not(:last-child) {*/
/*  border-right: 1px solid var(--el-border-color);*/
/*}*/
.common-layout {
  height: 100%;
  width: 100%;
  background-color: #cad3c3;
  //display: inline-block;

}

.el-mian {
  width: 100%;
}


.broadside {
  margin: 0;
  /*background-size:100% 100%;*/
  background: url('public/piying.jpg') no-repeat fixed;
}

</style>